<template>
  <nav class="bottom-nav">
    <router-link
      v-for="item in navItems"
      :key="item.name"
      :to="item.path"
      class="nav-item"
      :class="{ active: $route.name === item.name }"
    >
      <component :is="item.icon" class="nav-icon" />
      <span class="nav-label">{{ item.label }}</span>
    </router-link>
  </nav>
</template>

<script setup lang="ts">
import { Home, Grid3X3, Heart, User } from 'lucide-vue-next'

interface NavItem {
  name: string
  path: string
  label: string
  icon: any
}

const navItems: NavItem[] = [
  {
    name: 'Home',
    path: '/',
    label: '首页',
    icon: Home
  },
  {
    name: 'Categories',
    path: '/categories',
    label: '分类',
    icon: Grid3X3
  },
  {
    name: 'Favorites',
    path: '/favorites',
    label: '我的收藏',
    icon: Heart
  },
  {
    name: 'Profile',
    path: '/profile',
    label: '个人中心',
    icon: User
  }
]
</script>

<style lang="scss" scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  padding: var(--spacing-sm) 0;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-xs);
  text-decoration: none;
  color: var(--color-text-light);
  transition: all 0.3s ease;
  min-width: 60px;
  
  &.active {
    color: var(--color-primary);
    
    .nav-icon {
      transform: scale(1.1);
    }
  }
  
  &:hover {
    color: var(--color-primary);
  }
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--spacing-xs);
  transition: transform 0.3s ease;
}

.nav-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
}

// 为底部导航留出空间
:global(.app-root) {
  padding-bottom: 80px;
}
</style> 